<template>
  <div>
    <van-list v-model="loading" @load="onLoad">
      <van-cell v-for="item in list" :key="item.id">
        <div class="wrap">
          <div class="img_wrap">
            <img :src="item.user.avatarUrl" alt="" />
          </div>
          <div class="content_wrap">
            <div class="header_wrap">
              <div class="info_wrap">
                <p>{{ item.user.nickname }}</p>
                <p>{{ item.time | dateFormat }}</p>
              </div>
              <div>{{ item.likedCount }}点赞</div>
            </div>
            <div class="footer_wrap">{{ item.content }}</div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { commentListAPI } from '@/api/Comment'
import moment from 'moment'

export default {
  name: 'cmt',
  data () {
    return {
      loading: false, // 控制加载更多进度条
      finished: false, // 数据还未全部加载完毕, 如果设置为true, 不会再触发onLoad触底加载更多事件
      list: [], // 评论列表
      pageNo: 1 // 第几页数据
    }
  },

  methods: {
    async onLoad () {
      // 获取数据
      const res = await commentListAPI({
        pageNo: this.pageNo
      })
      // res.data.data.comments.forEach((obj) => this.list.push(obj))
      this.list.push(...res.data.data.comments)

      this.loading = false

      if (this.list.length >= res.data.data.totalCount) {
        this.finished = true
      } else {
        this.pageNo++
      }
    }
  },
  filters: {
    dateFormat (val) {
      return moment(val).format('YYYY月MM月DD日')
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.wrap {
  display: flex;
}
.img_wrap {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.266667rem;
}
.img_wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.content_wrap {
  flex: 1;
}

/* 右侧头部 */
.header_wrap {
  display: flex;
}
.info_wrap {
  flex: 1;
}
.info_wrap p:first-child {
  font-size: 0.373333rem;
  color: #666;
}
.info_wrap p:last-of-type {
  font-size: 0.24rem;
  color: #999;
}
.header_wrap div:last-of-type {
  color: #999;
  font-size: 0.293333rem;
}

/* 评论内容 */
.footer_wrap {
  font-size: 0.4rem;
  color: #333;
}
</style>
